<template>
  <van-row class="luck_wrap">
    <div class="luck_item_wrap">
      <div v-for="(imgLi,index) in prizeList" :key="imgLi.prize_name" :class="{'active-border':index===activityIndex}" xref="pice" class="prize-item-wrap prize-border-none" >
        <div v-if="index===4" class="prize-btn-wrap" @click.stop="prizeZhuan" >
          <div class="btn-text" v-html="prizeStareText" />
          <div v-if="is_show_count" class="btn-luck-draw-num">（剩余{{ remainingTimes?remainingTimes:0 }}次）</div>
        </div>
        <div v-else class="prize-img-wrap">
          <van-image v-if="imgLi.prize_img" :src="imgLi.prize_img" class="prize-img" fit="contain" />
        </div>
        <div class="prize_name">{{ imgLi.prize_name }}</div>
      </div>
    </div>
  </van-row>
</template>

<script>
import api from '@/api/lottery'
export default {
  data() {
    return {
      is_show_count: true,
      prizeStareText: '抽奖',
      remainingTimes: 10, // 抽奖次数
      activityIndex: null, // 选中index
      clickLoading: true, // 防止重复点击
      arrNum: [0, 1, 2, 5, 8, 7, 6, 3], // 定义转动的顺序
      prozeLevel: null, // 中奖下标
      prizeList: [],
      timer1: '', // 定时器变量
      timer2: '', // 定时器变量
      s2: '',
      prizeIndex: -1, // 抽奖选择初始值,
      prizeInfo: {} // 中将详情
    }
  },
  created() {
    api.getList()
      .then(res => {
        if (res.code === 200) {
          res.result.splice(4, 0, {})
          this.prizeList = res.result
        }
      })
  },
  methods: {
    move() {
      this.prizeIndex++
      if (this.prizeIndex === 8) {
        this.prizeIndex = 0
      }
      this.activityIndex = this.arrNum[this.prizeIndex]
      if (this.activityIndex === this.s2) {
        clearInterval(this.timer1)
        this.timer1 = null
        clearInterval(this.timer2)
        this.timer2 = null
        this.stop()
      }
      // this.timeFlag += 100
      // if (this.timeFlag >= 10000 && !this.lottoDetail.prizeName) {
      //   clearInterval(this.timer1)
      //   clearInterval(this.timer2)
      //   this.$toast({
      //     message: '当前抽奖人数过多，稍后再来',
      //     duration: 1500
      //   })
      //   this.clickFlage = true // 能点击
      //   setTimeout(() => {
      //     // 刷新后重新加载;
      //     location.reload()
      //   }, 1500)
      // }
    },
    checkIsAward() {
      alert(this.prizeInfo['prize_name'])
    },
    // 停止
    stop() {
      this.clickLoading = false // 不能点击
      this.close()
      this.checkIsAward() // 弹出是否中奖
    },
    // 关闭没中奖
    close() {
      this.s2 = ''
      this.prozeLevel = ''
      this.activityIndex = ''
      this.prizeIndex = -1
      this.timeFlag = 0
      this.clickLoading = true
    },
    // 降速
    lowSpeed() {
      clearInterval(this.timer1)
      this.clickLoading = false // 不能点击
      this.timer2 = setInterval(this.move, 300)
      setTimeout(() => {
        // 顺序打乱
        this.s2 = this.prozeLevel
      }, 1000)
    },
    prizeZhuan() {
      if (this.remainingTimes > 0) { // 判断剩余抽奖次数
        if (this.clickLoading) {
          // 活动开始
          this.clickLoading = false // 不能点击
          // 请求成功后
          api.prizeLottery({})
            .then(res => {
              if (res.code === 200) {
                this.prizeInfo = res.result
                // 抽奖次数减1
                this.remainingTimes -= 1
                // 中奖的index
                this.prozeLevel = this.prizeList.findIndex((item) => (item.prize_id === this.prizeInfo['prize_id']))
                setTimeout(() => {
                  clearInterval(this.timer1)
                  this.lowSpeed()
                }, 2000)
              } else {
                this.$toast.fail(res.msg)
              }
            })
            .catch(() => {
              this.$toast({
                message: '不能抽奖',
                duration: 1500
              })
              this.clickLoading = false // 不能点击
              clearInterval(this.timer1)
              clearInterval(this.timer2)
            })
          // 开始转动
          this.timer1 = setInterval(this.move, 100)
        }
      } else {
        // 没有抽奖机会了
        this.clickLoading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.luck_wrap{
  padding-top: 30px;
  .luck_item_wrap{
    width: 225px;
    margin: 0 auto;
    .prize-item-wrap {
      background: url("../../assets/images/border.png") no-repeat;
      box-sizing: border-box;
      background-size: 100%;
      float: left;
      width: 68px;
      height: 68px;
      margin-right: 5px;
      margin-bottom: 0.25rem;
      position: relative;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:nth-child(5) {
        background: url("../../assets/images/prizeBtn.png") no-repeat !important;
        background-size: 100% 100%;
        background-size: 100% !important;
      }
      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9) {
        margin-bottom: 0;
      }
      box-sizing: border-box;
      .prize-btn-wrap {
        height: 100%;
        width: 100%;
        text-align: center;
        .btn-text {
          font-size: 17px;
          font-weight: bold;
          color: #ffffff;
          line-height: 16px;
          text-shadow: 0px 1px 3px rgba(241, 41, 0, 0.6);
          padding-top: 10px;
        }
        .btn-luck-draw-num {
          margin-top: 4px;
          font-size: 8px;
          font-weight: bold;
          color: #ffffff;
          text-shadow: 0px 1px 3px rgba(255, 44, 0, 0.31);
        }
      }
      .prize-img-wrap {
        text-align: center;
        padding: 5px 5px 0;

        .prize-img {
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          height: 36px;
          /deep/ img {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
        }

        img {
          width: 100%;
          height: 36px;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
      }
      .prize_name {
        padding: 0 8px;
        text-align: center;
        font-size: 7px;
        color: #fe4834;
        line-height: 1.2;
      }
    }
    .active-border {
      color: #fff;
      background: url("../../assets/images/borderSelect.png") no-repeat;
      background-size: 100%;
      .prize_name {
        color: #fff;
      }
    }
  }

}

</style>
